<template>
  <div>
      <div class="timer">
          <ul class="time-type">
              <li>
                  <span>{{day}}</span>
                  <span>{{hour}}</span>
                  <span>{{minute}}</span>
                  <span>{{second}}</span>
              </li>
              <li>
                  <span>天</span>
                  <span>时</span>
                  <span>分</span>
                  <span>秒</span>
              </li>
          </ul>
      </div>
  </div>
</template>
 
 
 
<script>
import { fail } from 'assert';
  export default{
    data () {
      return {
        time:"",
        day:"",
        hour:"",
        minute:"",
        second:"",
        flag : false
      }
    },
    mounted () {
      let time = setInterval(()=>{
        if(this.flag == true){
          clearInterval(time)
        }
        this.timeDown()
      },500)
    },
    props : {
      endTime : {
        type : String
      }
    },
    methods : {
      timeDown () {
        const endTime = new Date(this.endTime)
        const nowTime = new Date();
        let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
        let d = parseInt(leftTime/(24*60*60))
        let h = this.formate(parseInt(leftTime/(60*60)%24))
        let m = this.formate(parseInt(leftTime/60%60))
        let s = this.formate(parseInt(leftTime%60))
        if(leftTime <= 0){
          this.flag = true
          this.day = this.hour = this.minute = this.second = this.time = 0
          this.$emit('time-end')
          return false
        }
        this.time = `${d}天${h}小时${m}分${s}秒`     // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
        this.day = d;
        this.hour = h;
        this.minute = m;
        this.second = s;
      },
      formate (time) {
        if(time>=10){
          return time
        }else{
          return `0${time}`
        }
      }
    }
  }
</script>
 
<style lang="less" scoped>
.timer{
    padding: 15px;
    box-sizing: border-box;
    background-color:#F7F7FB;
    .time-type{
        li{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 10px;
            color: #8C979D;
            font-size: 12px;
        }
        li:first-child{
            span{
                border: 1px solid #979BCF;
                padding: 5px 8px;
                border-radius: 4px;
                color: #6881FF;
                font-weight: bold;
            }
        }
    }
}
</style>
